{% extends 'baykeshop/base_site.html' %}

{% load static %}

{% block title %}订单支付{% endblock %}


{% block extrastyle %}
<script src="{% static 'baykeshop/js/axios.min.js' %}"></script>
<script src="{% static 'baykeshop/js/request.js' %}"></script>
    <style>
        .pay-desc{
            background: url('{% static "baykeshop/img/orderBg.png" %}') no-repeat;
            background-size: 100% 100%;
            height: 159px;
        }
        .pay-method-box{
            height: 100px;
            border: solid 1px #eee;
            position: relative;
        }
        .pay-tag{
            position: absolute;
            right: 0;
            top: 0;
        }
        .pay-method-box:hover{
            border: solid 1px #f14668;
            cursor: pointer;
        }
        .active{
            border: solid 1px #f14668;
        }
    </style>
{% endblock %}

{% block breadcrumb %}
<div class="container">
  <nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
    <ul>
      <li><a href="{% url 'baykeshop:home' %}">首页</a></li>
      <li class="is-active"><a href="#" aria-current="page">订单支付</a></li>
    </ul>
  </nav>
</div>
{% endblock %}

{% block content %}
    <div class="container">
        {% if order.pay_status > 1 and order.pay_status != 6 %}

        {% block payok %}
            {% include 'baykeshop/payment/payok.html' %}
        {% endblock %}

        {% else %}
            <div class="pay-desc is-flex is-flex-direction-column is-justify-content-center pl-6 has-text-white-ter">
                <h1 class="is-size-3">订单提交成功！去付款咯~</h1>
                <p>剩余时间：01小时49分钟24秒</p>
            </div>
            <div class="box is-radiusless is-marginless pl-6 pr-6" style="line-height: 30px;">
                <p>订单编号：{{ order.order_sn }}</p> 
                <p>订单总额：{{ order.total_amount }}元</p>
                <p>收货信息：{{ order.address }}</p>
                <p>订单商品：</p>
                <div class=" dropdown-divider"></div>
                <ul>
                    {% for order_sku in order.baykeshopordersku_set.all %}
                        <li><a>{{ order_sku.title }} <br> {{ order_sku.spec }}</a></li>
                        <div class=" dropdown-divider"></div>
                    {% endfor %}
                </ul>
            </div>

            <div class="box is-radiusless mt-3" id="payMethod">
                <h1 class="is-size-4 pl-2">选择支付方式</h1>
                <div class="dropdown-divider"></div>
                {{ pay_methods|json_script:"pay-methods-data" }}

                <div class="columns">
                    <div class="column is-3" v-for="pay in payMethods" :key="pay.value" @click="payMethod(pay)">
                        <div class="pay-method-box is-flex is-align-items-center is-justify-content-center" :class="{active:pay.is_default}">
                            <div class="pay-icon mr-3" v-if="pay.value == 4">
                                <img :src="pay.icon" width="36px">
                            </div>
                            <img v-else class="mr-3" :src="pay.icon" width="36px">

                            <div v-if="pay.value == 4">
                                <h1 class=" is-size-4">{$ pay.name $}</h1> 
                                <span class="has-text-grey-light">余额：{{ request.user.baykeuserinfo.balance }}</span>
                            </div>
                            <h1 v-else class="is-size-4">{$ pay.name $}</h1> 

                            <div v-if="pay.is_default" class="tag is-danger pay-tag is-radiusless is-size-6">{$ text $}</div>
                        </div>
                    </div>
                </div>

                <div class="dropdown-divider"></div>
                <div class="has-text-right">
                    <button class="button is-danger is-large pl-6 pr-6" @click="payNow">立即支付</button>
                </div>
            </div>

        {% endif %}
    </div>
{% endblock %}

{% block vue %}
{% if order.pay_status > 1 and order.pay_status != 6 %}
{% else %}
    <script>

        var pay_methods = JSON.parse(document.getElementById('pay-methods-data').textContent);

        var payMethod = new Vue({
            el: '#payMethod',
            delimiters: ['{$', '$}'],
            data: {
                payMethods: pay_methods,
                defaultPay: null,
                text: "默认",
            },

            created(){
                // 设置默认支付方式
                this.payMethods.forEach(element => {
                    if (element.is_default) {
                        this.defaultPay = element
                    }
                })
            },

            methods: {
                // 支付方式
                payMethod(pay){
                    this.defaultPay = pay
                    this.payMethods.forEach(element => {
                        if (pay.value == element.value){
                            element.is_default = true
                            this.text = "选择"
                        }else{
                            element.is_default = false
                        }
                    })
                },

                // 收款
                payNow(){
                    const sendData = new FormData()
                    sendData.append('order_sn', '{{ order.order_sn }}')
                    sendData.append('paymethod', this.defaultPay.value)
                    console.log('asdasda')
                    request({
                        url: '{% url "baykeshop:pay_now" %}',
                        method: 'post',
                        data: sendData
                    }).then(res => {
                        if (res.data.code == 'ok') {
                            navbar.toastMessage('is-success', res.data.message)
                            location.href = res.data.alipay_url
                        }else{
                            navbar.toastMessage('is-danger', res.data.message)
                        }
                    })
                }
            }
        })
    </script>
{% endif %}
{% endblock %}
    
    